import React, { useEffect } from 'react'
import Hls from 'hls.js'
import { Player } from 'video-react'

const VideoHls = () => {
  useEffect(() => {
    createVideo()
  }, [])
  const createVideo = () => {
    let video = document.getElementById('video')
    let videoSrc = 'https://vod3.buycar5.cn/20210416/AxCh7eY4/index.m3u8'
    //
    // First check for native browser HLS support
    //
    if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc
      //
      // If no native HLS support, check if HLS.js is supported
      //
    } else if (Hls.isSupported()) {
      let hls = new Hls()
      hls.loadSource(videoSrc)
      hls.attachMedia(video)
    }
  }
  return (
    <>
      <video id="video" controls width="500" height="500"></video>
      <Player>
        <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
      </Player>
    </>
  )
}

export default VideoHls
